<template>
  <div class="tab-wrapper">
    <div class="tab__header" ref="tabHeaderItem">
      <div class="tab__header__item"
           :style="floatLeft? '': 'width:100%'">
        <div style="width: 100%;">
          <div class="tab__item"
               @click="tabItemClick(item.name,key)"
               @touchstart="tabItemClick(item.name,key)"
               v-for="(item,key) in tabList"
               :class="{'tab--active':activeTab.index===key}">
            <span>{{item.name}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="tab__content"
         ref="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'

  export default {
    name: "ZbTab",
    props: {
      floatLeft: { //是否开启左浮动模式
        default: false
      },
      isOpenTransition: {
        default: false //是否开启动画
      }
    },
    data() {
      return {
        tabList: [],
        activeTab: {
          index: 0,
          name: ''
        }
      }
    },
    watch: {
      activeTab(newValue, oldValue) {
        this.$refs.content.children[oldValue.index].className = "tab--panel-wrapper";
        this.$refs.content.children[newValue.index].className = "tab--panel-wrapper--active";
      }
    },
    methods: {
      tabItemClick(name, index) {
        this.activeTab = {
          index: index,
          name: name
        }
      },
      _initScroll: function () {
        new BScroll(this.$refs.tabHeaderItem, {
          scrollX: true,
          bounce: true
        });
      }
    },
    mounted() {
      let self = this; //外层新建变量引用this
      this.$slots.default.forEach((components) => { //循环default内的内容
        if (components.tag && components.componentOptions) { //如果子元素tag键&&componentOptions有内容。
          self.tabList.push(components.componentOptions.propsData)
          // 在components.componentOptions这个键内 有propsDate这个属性。我们可以通过这个属性拿到子组件的props值
        }
      });
      this.$nextTick(() => { //避免data未更新
        this.activeTab = { //给activeTab赋初始值
          index: 0, //默认选中第一个
          name: this.tabList[0].name //寻找tabList第一个元素 还有他的名字
        };
      });
      setTimeout(() => {
        this.$nextTick(() => { //避免data未更新
            this._initScroll();
          }
        )
      }, 20)
    },
  }
</script>

<style scoped>
  .iconfont {
    font-size: 1.5rem;
  }

  .tab__header {
    display: flex;
  }

  .tab__header__item {
    margin: 0;
  }

  .tab__header__item > div {
    display: flex;
    flex-direction: row;
    white-space: nowrap;
    transition: transform .3s;
  }

  .tab__item {
    font-size: 1.3rem;
    cursor: pointer;
    margin-right: 1rem;
    flex: 1;
    text-align: center;
  }

  .tab--active > span {
    border-bottom: 2px solid #1890FF;
    color: #1890FF;
    padding-bottom: .5rem;
  }

  .tab__header__btn--left {
    margin-right: .5rem;
    cursor: pointer;
  }

  .tab__header__btn--right {
    margin-left: .5rem;
    cursor: pointer;
  }

  .tab--panel-wrapper {
    display: none;
    transition: all .3s;
  }

  .tab--panel-wrapper--active {
    display: block !important;
    transition: all .3s;
  }
</style>
